<template>
    <div class="tongbao">
        <ModalTitle title="漏报案件分析" />
        <div class="tongbao-chart" ref="tongbaoChart"></div>
    </div>
</template>

<script>
import ModalTitle from '@/components/ModalTitle/Index.vue';
import { DuiWuJingXiHua } from '@/api/zhangzi'
export default {
    components: {
        ModalTitle
    },

    data() {
        return {

        }
    },

    mounted() {
        this.tongbaoChartData()
    },

    methods: {
        async tongbaoChartData() {
            const { success, data, message } = await DuiWuJingXiHua.underreportingCasesAPI()
            if (success) {
                console.log(data, 1);
                let serveData = data.map(e => { return { name: e.name, value: e.count } })
                this.tongbaoChartFn(serveData)
            } else {
                this.$message.error(message)
            }
        },

        tongbaoChartFn(data) {
            let tongbaoChars = echarts.init(this.$refs.tongbaoChart)
            let option = {
                toolbox: {
                    show: false,
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}: {d}',
                    backgroundColor: 'rgba(47,37,198,0.75)',
                    borderColor: '#2880FF',
                    borderWidth: 1,
                    textStyle: {
                        color: '#fff'
                    }
                },
                series: [
                    {
                        name: 'Nightingale Chart',
                        type: 'pie',
                        radius: ['0', '80%'],
                        center: ['50%', '55%'],
                        roseType: 'area',
                        label: {
                            normal: {
                                formatter: params => {
                                    return (
                                        '{name|' + params.name + '}\n{value|' +
                                        params.value + '}'
                                    );
                                },
                                rich: {
                                    name: {
                                        fontSize: 12,
                                        padding: [0, 0, 10, 0],
                                        color: '#fff'
                                    },
                                    value: {
                                        fontSize: 14,
                                        fontWeight: 'bolder',
                                        padding: [10, 0, 0, 0],
                                        margin: [10, 0, 0, 0],
                                        color: 'inherit'
                                    }
                                }
                            }
                        },
                        labelLine: {
                            length: 5,
                            length2: 10,
                        },
                        selectedOffset: 30,
                        selectedMode: true,
                        itemStyle: {
                            borderRadius: 8
                        },
                        data
                    }
                ]
            };
            tongbaoChars.setOption(option)
        }
    }
}
</script>

<style lang="less" scoped>
.tongbao {
    width: 100%;
    height: 47.5rem;

    .tongbao-chart {
        width: 100%;
        height: 38rem;
    }
}
</style>